<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SCOR模型供应链驾驶舱</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-primary: #165DFF;
      --color-secondary: #36CFC9;
      --color-warning: #FF7D00;
      --color-danger: #F53F3F;
      --color-success: #00B42A;
      --font-inter: 'Inter', sans-serif;
    }

    @utility smooth-transition {
      transition: all 0.3s ease-in-out;
    }

    @utility card-hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }
  </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
  <!-- 头部标题 -->
  <header class="mb-8">
    <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800">SCOR模型供应链驾驶舱</h1>
    <p class="text-gray-600 mt-2">基于计划-采购-生产-交付-退货全流程的绩效监控与分析</p>
  </header>

  <!-- 时间筛选栏 -->
  <div class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4 mb-3 md:mb-0">
      <div class="relative">
        <input type="text" placeholder="开始日期" class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
        <i class="fas fa-calendar-alt absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
      </div>
      <div class="relative">
        <input type="text" placeholder="结束日期" class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
      </div>
      <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
        <option>按季度</option>
        <option>按月</option>
        <option>按周</option>
      </select>
    </div>
    <button class="bg-primary text-white px-4 py-2 rounded-lg flex items-center smooth-transition hover:bg-primary/90">
      <i class="fas fa-filter mr-2"></i> 筛选
    </button>
  </div>

  <!-- SCOR核心流程看板 -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
    <!-- 计划流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="plan">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">计划流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">计划准确率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
          <i class="fas fa-project-diagram text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-primary">89<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 3%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="planChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">95%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-primary h-2 rounded-full" style="width: 89%"></div>
        </div>
      </div>
    </div>

    <!-- 采购流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="source">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">采购流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">供应商准时交货率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
          <i class="fas fa-shopping-cart text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-secondary">92<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 1%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="sourceChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">95%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-secondary h-2 rounded-full" style="width: 92%"></div>
        </div>
      </div>
    </div>

    <!-- 生产流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="make">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">生产流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">产能利用率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning">
          <i class="fas fa-industry text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-warning">78<span class="text-lg ml-1">%</span></span>
          <span class="text-danger text-sm flex items-center ml-2"><i class="fas fa-arrow-down mr-1"></i> 2%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="makeChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">85%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-warning h-2 rounded-full" style="width: 78%"></div>
        </div>
      </div>
    </div>

    <!-- 交付流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="deliver">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">交付流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">订单准时交付率</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success">
          <i class="fas fa-truck text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-success">96<span class="text-lg ml-1">%</span></span>
          <span class="text-success text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 4%</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="deliverChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">95%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-success h-2 rounded-full" style="width: 96%"></div>
        </div>
      </div>
    </div>

    <!-- 退货流程卡片 -->
    <div class="scor-card bg-white rounded-xl shadow-sm p-6 smooth-transition hover:card-hover cursor-pointer" data-process="return">
      <div class="flex justify-between items-start mb-4">
        <div>
          <h3 class="text-gray-500 font-medium">退货流程</h3>
          <p class="text-2xl font-bold text-gray-800 mt-1">退货处理周期</p>
        </div>
        <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger">
          <i class="fas fa-undo-alt text-xl"></i>
        </div>
      </div>
      <div class="flex items-end justify-between">
        <div>
          <span class="text-3xl font-bold text-danger">3.2<span class="text-lg ml-1">天</span></span>
          <span class="text-danger text-sm flex items-center ml-2"><i class="fas fa-arrow-up mr-1"></i> 0.5天</span>
        </div>
        <div class="w-24 h-24">
          <canvas id="returnChart"></canvas>
        </div>
      </div>
      <div class="mt-4 text-sm text-gray-500">
        <div class="flex justify-between mb-1">
          <span>目标值</span>
          <span class="font-medium">2天</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-danger h-2 rounded-full" style="width: 64%"></div> <!-- 3.2/5=64%, 假设最大周期为5天 -->
        </div>
      </div>
    </div>
  </div>

  <!-- 穿透查询模态框 -->
  <div id="drillDownModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-4xl max-h-[90vh] overflow-auto">
      <div class="p-6 border-b">
        <div class="flex justify-between items-center">
          <h3 id="modalTitle" class="text-xl font-bold text-gray-800">计划流程详情</h3>
          <button id="closeModal" class="text-gray-400 hover:text-gray-600">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="p-6" id="modalContent">
        <!-- 详情内容将通过JS动态填充 -->
      </div>
      <div class="p-6 border-t flex justify-end">
        <button id="exportData" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center smooth-transition hover:bg-primary/90">
          <i class="fas fa-download mr-2"></i> 导出数据
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  // 样例数据 - SCOR模型各流程KPI趋势
  const scorData = {
    plan: {
      name: "计划流程",
      kpi: "计划准确率",
      unit: "%",
      current: 89,
      target: 95,
      trend: [85, 87, 88, 89, 90, 89], // 近6周期数据
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { product: "A系列", accuracy: 92, trend: [88, 90, 92, 91, 93, 92] },
        { product: "B系列", accuracy: 87, trend: [83, 85, 86, 87, 88, 87] },
        { product: "C系列", accuracy: 91, trend: [89, 90, 91, 92, 91, 91] }
      ]
    },
    source: {
      name: "采购流程",
      kpi: "供应商准时交货率",
      unit: "%",
      current: 92,
      target: 95,
      trend: [90, 91, 92, 92, 93, 92],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { supplier: "供应商A", onTimeRate: 95, trend: [93, 94, 95, 95, 96, 95] },
        { supplier: "供应商B", onTimeRate: 89, trend: [87, 88, 89, 89, 90, 89] },
        { supplier: "供应商C", onTimeRate: 93, trend: [91, 92, 93, 93, 94, 93] }
      ]
    },
    make: {
      name: "生产流程",
      kpi: "产能利用率",
      unit: "%",
      current: 78,
      target: 85,
      trend: [80, 79, 78, 78, 77, 78],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { factory: "工厂1", utilization: 82, trend: [84, 83, 82, 82, 81, 82] },
        { factory: "工厂2", utilization: 75, trend: [76, 75, 74, 75, 74, 75] },
        { factory: "工厂3", utilization: 77, trend: [78, 77, 76, 77, 76, 77] }
      ]
    },
    deliver: {
      name: "交付流程",
      kpi: "订单准时交付率",
      unit: "%",
      current: 96,
      target: 95,
      trend: [92, 93, 94, 95, 96, 96],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { region: "华北", onTimeRate: 98, trend: [95, 96, 97, 98, 98, 98] },
        { region: "华东", onTimeRate: 97, trend: [93, 94, 95, 96, 97, 97] },
        { region: "华南", onTimeRate: 94, trend: [90, 91, 92, 93, 94, 94] }
      ]
    },
    return: {
      name: "退货流程",
      kpi: "退货处理周期",
      unit: "天",
      current: 3.2,
      target: 2,
      trend: [3.7, 3.5, 3.3, 3.2, 3.1, 3.2],
      trendLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      detailData: [
        { reason: "质量问题", cycle: 2.8, trend: [3.2, 3.0, 2.9, 2.8, 2.8, 2.8] },
        { reason: "尺寸不符", cycle: 3.5, trend: [4.0, 3.8, 3.6, 3.5, 3.5, 3.5] },
        { reason: "其他原因", cycle: 3.0, trend: [3.5, 3.3, 3.2, 3.1, 3.0, 3.0] }
      ]
    }
  };

  // 初始化各流程图表
  function initCharts() {
    // 计划流程图表
    new Chart(document.getElementById('planChart'), {
      type: 'line',
      data: {
        labels: scorData.plan.trendLabels.slice(-3),
        datasets: [{
          data: scorData.plan.trend.slice(-3),
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 采购流程图表
    new Chart(document.getElementById('sourceChart'), {
      type: 'line',
      data: {
        labels: scorData.source.trendLabels.slice(-3),
        datasets: [{
          data: scorData.source.trend.slice(-3),
          borderColor: '#36CFC9',
          backgroundColor: 'rgba(54, 207, 201, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 生产流程图表
    new Chart(document.getElementById('makeChart'), {
      type: 'line',
      data: {
        labels: scorData.make.trendLabels.slice(-3),
        datasets: [{
          data: scorData.make.trend.slice(-3),
          borderColor: '#FF7D00',
          backgroundColor: 'rgba(255, 125, 0, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 交付流程图表
    new Chart(document.getElementById('deliverChart'), {
      type: 'line',
      data: {
        labels: scorData.deliver.trendLabels.slice(-3),
        datasets: [{
          data: scorData.deliver.trend.slice(-3),
          borderColor: '#00B42A',
          backgroundColor: 'rgba(0, 180, 42, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });

    // 退货流程图表
    new Chart(document.getElementById('returnChart'), {
      type: 'line',
      data: {
        labels: scorData.return.trendLabels.slice(-3),
        datasets: [{
          data: scorData.return.trend.slice(-3),
          borderColor: '#F53F3F',
          backgroundColor: 'rgba(245, 63, 63, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });
  }

  // 渲染穿透查询详情
  function renderDrillDownContent(processKey) {
    const processData = scorData[processKey];
    document.getElementById('modalTitle').textContent = `${processData.name} - ${processData.kpi}详情`;

    const content = document.getElementById('modalContent');
    content.innerHTML = `
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <div class="lg:col-span-2">
            <h4 class="text-gray-600 font-medium mb-4">趋势分析</h4>
            <div class="bg-gray-50 p-4 rounded-lg">
              <canvas id="detailTrendChart" height="200"></canvas>
            </div>
          </div>
          <div>
            <h4 class="text-gray-600 font-medium mb-4">当前状态</h4>
            <div class="bg-gray-50 p-4 rounded-lg h-full">
              <div class="flex items-end mb-2">
                <span class="text-4xl font-bold text-primary">${processData.current}${processData.unit}</span>
                <span class="${processData.current >= processData.target ? 'text-success' : 'text-danger'} text-sm flex items-center ml-2">
                  <i class="fas ${processData.current >= processData.target ? 'fa-arrow-up' : 'fa-arrow-down'} mr-1"></i>
                  ${processData.current > scorData[processKey].trend[scorData[processKey].trend.length-2] ?
            `+${processData.current - scorData[processKey].trend[scorData[processKey].trend.length-2]}` :
            processData.current < scorData[processKey].trend[scorData[processKey].trend.length-2] ?
                    `${processData.current - scorData[processKey].trend[scorData[processKey].trend.length-2]}` : '持平'}
                </span>
              </div>
              <div class="mt-4 text-sm text-gray-500">
                <div class="flex justify-between mb-1">
                  <span>目标值</span>
                  <span class="font-medium">${processData.target}${processData.unit}</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-primary h-2 rounded-full" style="width: ${(processData.current / processData.target * 100).toFixed(1)}%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="mb-8">
          <h4 class="text-gray-600 font-medium mb-4">细分维度分析</h4>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">细分维度</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前值</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">趋势</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                ${processData.detailData.map(item => `
                  <tr class="hover:bg-gray-50 smooth-transition">
                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">${item[Object.keys(item)[0]]}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="font-medium ${item[Object.keys(item)[1]] >= (processData.unit === '%' ? processData.current : processData.current/1.2) ? 'text-success' : 'text-gray-900'}">
                        ${item[Object.keys(item)[1]]}${processData.unit}
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-24 h-8">
                        <canvas class="detailTrendSubChart"></canvas>
                      </div>
                    </td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
        
        <div>
          <h4 class="text-gray-600 font-medium mb-4">可能的改进措施</h4>
          <div class="space-y-3">
            <div class="flex items-start">
              <div class="flex-shrink-0 mt-0.5">
                <i class="fas fa-lightbulb text-primary"></i>
              </div>
              <div class="ml-3">
                <p class="text-gray-900">${processKey === 'plan' ?
            '增加市场需求调研频率，优化预测模型参数，引入机器学习预测算法' :
            processKey === 'source' ?
                    '对低绩效供应商启动辅导计划，增加备选供应商数量' :
                    processKey === 'make' ?
                            '分析产能瓶颈工序，考虑设备升级或加班排班优化' :
                            processKey === 'deliver' ?
                                    '优化区域配送中心布局，与第三方物流商重新谈判时效条款' :
                                    '建立退货自动化审核流程，增加质检环节减少退货率'}</p>
              </div>
            </div>
          </div>
        </div>
      `;

    // 初始化详情页趋势图
    new Chart(document.getElementById('detailTrendChart'), {
      type: 'line',
      data: {
        labels: processData.trendLabels,
        datasets: [{
          label: processData.kpi,
          data: processData.trend,
          borderColor: processKey === 'plan' ? '#165DFF' :
                  processKey === 'source' ? '#36CFC9' :
                          processKey === 'make' ? '#FF7D00' :
                                  processKey === 'deliver' ? '#00B42A' : '#F53F3F',
          backgroundColor: processKey === 'plan' ? 'rgba(22, 93, 255, 0.1)' :
                  processKey === 'source' ? 'rgba(54, 207, 201, 0.1)' :
                          processKey === 'make' ? 'rgba(255, 125, 0, 0.1)' :
                                  processKey === 'deliver' ? 'rgba(0, 180, 42, 0.1)' : 'rgba(245, 63, 63, 0.1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'top' } },
        scales: {
          y: {
            title: { display: true, text: processData.unit },
            min: processKey === 'return' ? 0 : processKey === 'make' ? 70 : 80
          }
        }
      }
    });

    // 初始化细分维度趋势图
    const subCharts = document.querySelectorAll('.detailTrendSubChart');
    subCharts.forEach((chart, index) => {
      const subData = processData.detailData[index];

      new Chart(chart, {
        type: 'line',
        data: {
          labels: subData.trend.slice(-3).map(() => ''), // 使用 trend 属性
          datasets: [{
            data: subData.trend.slice(-3), // 使用 trend 属性
            borderColor: subData.trend[subData.trend.length-1] >= (processData.unit === '%' ? processData.current : processData.current/1.2) ? '#00B42A' : '#F53F3F',
            backgroundColor: 'transparent',
            borderWidth: 2,
            tension: 0.3,
            fill: false
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: { x: { display: false }, y: { display: false } }
        }
      });
    });
  }

  // 事件监听 - 点击卡片打开模态框
  document.querySelectorAll('.scor-card').forEach(card => {
    card.addEventListener('click', () => {
      const processKey = card.dataset.process;
      renderDrillDownContent(processKey);
      document.getElementById('drillDownModal').classList.remove('hidden');
      document.body.style.overflow = 'hidden'; // 禁止背景滚动
    });
  });

  // 事件监听 - 关闭模态框
  document.getElementById('closeModal').addEventListener('click', () => {
    document.getElementById('drillDownModal').classList.add('hidden');
    document.body.style.overflow = ''; // 恢复背景滚动
  });

  // 点击模态框外部关闭
  document.getElementById('drillDownModal').addEventListener('click', (e) => {
    if (e.target === document.getElementById('drillDownModal')) {
      document.getElementById('drillDownModal').classList.add('hidden');
      document.body.style.overflow = '';
    }
  });

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', initCharts);
</script>
</body>
</html>